import './table2.less'

import React, { useState } from 'react';
import { Space, Table, Tag, Input, Select, InputNumber } from 'antd';


function Table2() {
    const [keyWord, setKeyWord] = useState();
    const changeKeyWord = () => {
        console.log(keyWord);

    }
    const handleChange = (value: string) => {
        console.log(`selected ${value}`);
    };

    let subjectData: any = [];
    const getSubject = [
        { value: '1001库存现金', label: '1001库存现金' },
        { value: '1012其他货币资金', label: '1012其他货币资金' },
        { value: '1101短期投资', label: '1101短期投资' },
        { value: '1121应收票据', label: '1121应收票据' }];
    subjectData = (getSubject);

    let auxiliary: any = [];
    const getAuxiliary = ['客户', '经理'];
    auxiliary = ([...getAuxiliary].join('、'))


    let getMoney;
    const getMoneyOnChange: any = (value: string) => {
        console.log('changed', value);
        getMoney = (value);
        console.log('get', getMoney);

    };

    let sendMoney;
    const sendMoneyOnChange: any = (value: string) => {
        console.log('changed', value);
        sendMoney = value;
        console.log('send', sendMoney);
    };

    const getProofData = [
        { keyWord: '购入固定资产', getMoney: 2000.56, sendMoney: 999.55 },
        { keyWord: '购入固定资产', getMoney: 20.56, sendMoney: 9.55 },
        { keyWord: '购入固定资产', getMoney: 180.56, sendMoney: 359.55 },
        { keyWord: '购入固定资产', getMoney: 0, sendMoney: 359.55 },
        { keyWord: '购入固定资产', getMoney: 180.56, sendMoney: 359.55 },
        { keyWord: '购入固定资产', getMoney: 400.56, sendMoney: 0 },
        { keyWord: '购入固定资产', getMoney: 5500.56, sendMoney: 8899.55 },
        { keyWord: '购入固定资产', getMoney: 800.56, sendMoney: 8599.55 }
    ];

    let totalGetMoney:any;
    const sumGetMoney=()=>{
        let sumGetMoney=0;
        for (let i=getProofData.length-1; i>=0;i--){
            sumGetMoney += getProofData[i].getMoney
            totalGetMoney=sumGetMoney.toFixed(2)
        }
        console.log(totalGetMoney);
        return totalGetMoney;
        
    }
    let totalSendMoney:any;
    const sumSendMoney=()=>{
        let sumSendMoney=0;
        for (let i=getProofData.length-1; i>=0;i--){
            sumSendMoney += getProofData[i].sendMoney
            totalSendMoney=sumSendMoney.toFixed(2)
        }
        console.log(totalSendMoney);
        return totalSendMoney;
        
    }
    sumGetMoney();
    sumSendMoney();
    const proofData = [];
    proofData.push(getProofData.values);
    return (
        <div className='table2'>
            <table>
                <thead>
                    <th>摘要</th>
                    <th>科目</th>
                    <th>辅助</th>
                    <th>借方余额</th>
                    <th>贷方余额</th>
                </thead>
                {getProofData.map((v, i) => <tbody>
                    <tr>
                        <td><Input placeholder="" style={{ border: 'none' }} value={v.keyWord} /></td>
                        <td>
                            <Select
                                mode="tags"
                                style={{ width: '100%' }}
                                placeholder=" "
                                onChange={handleChange}
                                options={subjectData}
                            />
                        </td>
                        <td>{auxiliary}</td>
                        <td>
                            <InputNumber<string>
                                style={{ width: '100%', border: 'none', textAlign: 'center' }}
                                defaultValue=" "
                                min="0"
                                step="0.01"
                                value={String(v.getMoney)}
                                onChange={getMoneyOnChange}
                                stringMode
                            />
                        </td>
                        <td>
                            <InputNumber<string>
                                style={{ width: '100%', border: 'none', textAlign: 'center' }}
                                defaultValue=" "
                                min="0"
                                step="0.01"
                                value={String(v.sendMoney)}
                                onChange={sendMoneyOnChange}
                                stringMode
                            />
                        </td>
                    </tr>
                </tbody>)}
                <tfoot>
                    <td colSpan={3} style={{ background: '#E9E9E9', textAlign: 'right' }}>合计:</td>
                    <td style={{textAlign:'left',paddingLeft:'10px'}}>{totalGetMoney}</td>
                    <td style={{textAlign:'left',paddingLeft:'10px'}}>{totalSendMoney}</td>
                </tfoot>
            </table>
        </div>
    )
}
export default Table2